<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>商品小li</title>
	<link rel="stylesheet" href="./css/base_transform.css">
	<style>
		* {
			margin: 0;
			padding: 0;
		
		}
		
		li {
			list-style: none;
		}
		/* 清空浮动 */
		.clearfix::after{
			content: "";
			display: block;
			clear: both;
		}
		/* box_right_li 右侧的各个li */
		 .box_right_li{
			width: 234px;
			height: 300px;
			margin-bottom: 14px;
			margin-left: 14px;
			float: left;
			background-color: #fff;
		}
	
		.box_right_li .box_right_a::before{
			content: "";
			display: table;
		}
		 .box_right_li .box_right_a{
			display: block;
			text-align: center;
		}
		.box_right_a .box_right_a_img{
			width: 160px;
			height: 160px;
			padding: 15px  37px 20px 37px;
			float: left;
		}
		/* 商品详情区 */
		
		.box_right_a_deta{
			width: 222px;
			height: 93px;
			line-height: 28px;
			padding: 6px;
			float: left;
		}
		/* 标题 
		 介绍 
		 价格 */
		.box_right_a_deta .box_right_price,.box_right_content ,.box_right_atitle{
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			font-size: 14px;
			color: #b0b0b0;
		}
		/* 标题 */
		.box_right_a_deta .box_right_atitle{
			font-weight: 400;
			color: #333;
		}
		/* 内容 */
		.box_right_a_deta .box_right_content{
			font-size: 12px;
		}
		/* 新价格 */
		.box_right_a_deta .box_right_new_price{
			color: #ff6700;
		}
		.box_right_a_deta .box_right_new_price::after{
			content: "元起";
			display: inline-block;
		}
		/* 旧价格 */
		.box_right_old_price{
			margin-left: 6px;
			color: #b0b0b0;
			text-decoration: line-through;
		}
		
		.box_right_old_price::after{
			content: "元";
			display: inline-block;
			text-decoration: line-through;
		}
		
	</style>
</head>
<body>
	<li class="box_right_li">
		<a href="#" class="box_right_a clearfix">
			<img class="box_right_a_img" src="../images/b1.jpg" alt="">
			<div class="box_right_a_deta">
				<h3 class="box_right_atitle">title</h3>
				<p class="box_right_content">box_right_content</p>
				<p class="box_right_price">
					<span class="box_right_new_price">1999</span><span class="box_right_old_price">2999</span>
				</p>
			</div>
		</a>
	</li>
</body>
</html>